<template>
  <div class="student-layout">
    <el-container class="layout-container">
      <!-- 侧边栏 -->
      <el-aside :width="sidebarWidth" class="sidebar">
        <div class="logo">
          <h2 v-if="!collapsed">高校成果管理系统</h2>
          <h2 v-else>管理</h2>
        </div>
        <el-menu
          :default-active="activeMenu"
          :collapse="collapsed"
          router
          class="sidebar-menu"
          background-color="var(--app-bg-secondary)"
          text-color="var(--app-text-regular)"
          active-text-color="var(--app-primary)"
        >
          <el-menu-item index="/student/dashboard">
            <el-icon><Monitor /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/student/achievements">
            <el-icon><Trophy /></el-icon>
            <template #title>个人学术成果</template>
          </el-menu-item>
          <el-menu-item index="/student/profile">
            <el-icon><UserFilled /></el-icon>
            <template #title>个人信息</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 顶部栏 -->
        <el-header class="header">
          <div class="header-left">
            <el-icon class="fold-icon" @click="toggleSidebar">
              <Fold v-if="!collapsed" />
              <Expand v-else />
            </el-icon>
          </div>
          <div class="header-right">
            <div class="breadcrumb" v-if="breadcrumb.length > 0">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
                  {{ item.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="user-dropdown-link">
                {{ username }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <keep-alive :include="cachedViews">
                <component :is="Component" :key="$route.path" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { ElMessage } from 'element-plus'
import { 
  Monitor, 
  User, 
  UserFilled,
  Trophy, 
  DocumentChecked, 
  ArrowDown,
  Fold,
  Expand
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'StudentLayout',
  components: {
    Monitor,
    User,
    UserFilled,
    Trophy,
    DocumentChecked,
    ArrowDown,
    Fold,
    Expand
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const authStore = useAuthStore()
    const username = ref(authStore.user?.username || '学生用户')
    const collapsed = ref(false)
    
    // 根据屏幕尺寸自动调整侧边栏
    const handleResize = () => {
      collapsed.value = window.innerWidth < 768
    }
    
    // 侧边栏宽度
    const sidebarWidth = computed(() => {
      return collapsed.value ? '64px' : '230px'
    })
    
    // 活动菜单项
    const activeMenu = computed(() => router.currentRoute.value.path)
    
    // 缓存的视图
    const cachedViews = computed(() => {
      return router.currentRoute.value.matched
        .filter(record => record.meta.keepAlive)
        .map(record => record.name as string)
    })
    
    // 面包屑导航
    const breadcrumb = computed(() => {
      return route.matched.filter(item => item.meta && item.meta.title).map(item => {
        return {
          title: item.meta.title as string,
          path: item.path
        }
      })
    })
    
    // 切换侧边栏
    const toggleSidebar = () => {
      collapsed.value = !collapsed.value
    }
    
    // 处理下拉菜单命令
    const handleCommand = async (command: string) => {
      if (command === 'logout') {
        await authStore.logout()
        router.push('/login')
        ElMessage.success('已安全退出系统')
      } else if (command === 'profile') {
        router.push('/student/profile')
      }
    }
    
    // 监听窗口尺寸变化
    watch(
      () => window.innerWidth,
      () => {
        handleResize()
      }
    )
    
    // 初始化时根据窗口尺寸设置侧边栏状态
    handleResize()
    window.addEventListener('resize', handleResize)
    
    return {
      username,
      collapsed,
      sidebarWidth,
      activeMenu,
      breadcrumb,
      cachedViews,
      toggleSidebar,
      handleCommand
    }
  }
})
</script>

<style lang="scss" scoped>
.student-layout {
  height: 100%;
  
  .layout-container {
    height: 100%;
  }

  .sidebar {
    background-color: var(--app-bg-secondary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: width 0.3s;
    overflow-x: hidden;
    
    .logo {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--app-bg-secondary);
      color: var(--app-primary);
      border-bottom: 1px solid var(--app-border-light);
      
      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        white-space: nowrap;
      }
    }

    .sidebar-menu {
      border-right: none;
    }
    
    .el-menu--collapse {
      width: 64px;
    }
  }

  .header {
    height: 60px;
    background-color: var(--app-bg-white);
    border-bottom: 1px solid var(--app-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    .header-left {
      display: flex;
      align-items: center;
      
      .fold-icon {
        font-size: 20px;
        cursor: pointer;
        color: var(--app-text-regular);
        &:hover {
          color: var(--app-primary);
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      
      .breadcrumb {
        margin-right: 20px;
      }
      
      .user-dropdown-link {
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--app-text-regular);
        
        &:hover {
          color: var(--app-primary);
        }
        
        .el-icon--right {
          margin-left: 5px;
        }
      }
    }
  }

  .main-content {
    padding: 20px;
    background-color: var(--app-bg-primary);
    height: calc(100vh - 60px);
    overflow-y: auto;
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式调整
@media screen and (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 1000;
    height: 100%;
  }
  
  .header {
    padding: 0 10px !important;
    
    .header-right {
      .breadcrumb {
        display: none;
      }
    }
  }
  
  .main-content {
    padding: 15px !important;
  }
}
</style> 